<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
         <link rel="stylesheet" type="text/css" href="test3.css">

        <title></title>
        
        <script type="text/javascript">
            window.onload = function(){
                var btns = document.getElementsByTagName("a");
                var divs = document.getElementById("dd").getElementsByTagName("div");
                

                for (var i=0;i<btns.length;i++) {
                    // 给每一个button添加一个属性index  
                    btns[i].index=i;
                    btns[i].onclick = function(){
                        for (var j= 0;j<btns.length;j++) {
                            btns[j].className="";
                            divs[j].className="";

                        }
                        this.className = "gold";
                        divs[this.index].className="show";
                    }

                }
            }
        </script>
    </head>
    <body>
        <img src="mc.jpg" style="width: 100%; height: 40%" alt="maidanglao" title="maidanglao">
      
           <div class="meal">
            <div class="title">
               <ul class="title_1">
                  <li>
                    <a href="#" class="gold">麦趣鸡盒</a>
                </li> 
               
                
                  <li class="subtitle">
                    <a href="#">巨无霸</a>
                </li> 
                
                
                  <li>
                    <a href="#">麦辣鸡腿汉堡套餐</a>
                </li> 
                
                  <li>
                    <a href="#">巨无霸超值套餐</a>
                </li> 
                
                  <li>
                    <a href="#">大薯条</a>
                </li>
                  <li class="subtitle">
                    <a href="#">麦旋风奥利奥口味</a>
                </li> 
                
                
                  <li>
                    <a href="#">双层吉士汉堡包</a>
                </li> 
                
                  <li>
                    <a href="#">原味板烧鸡腿堡套餐</a>
                </li> 
                
                  <li>
                    <a href="#">麦辣鸡翅</a>
                </li>
                
                  <li class="subtitle">
                    <a href="#">早晨全餐</a>
                </li> 
                
                
                  <li>
                    <a href="#">原味特级板烧鸡腿堡</a>
                </li> 
                
                  <li>
                    <a href="#">汉堡包</a>
                </li> 
                
                  <li>
                    <a href="#">麦辣鸡腿汉堡</a>
                </li>
                
                




               </ul>
               </div>
           
       
           <div class="neirong" id="dd">
               <div class="show"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/7ZFKa7ualxY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
               <div><img src="mc2.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc3.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc4.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc5.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc6.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc7.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc8.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc9.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc10.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc11.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc12.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc13.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
            </div>
            </div>



       

</body>

</html>
